import { HemisphericLight, Engine, FreeCamera, Vector3, Mesh, Scene, ArcRotateCamera } from 'babylonjs'

// 旋转  定位
export class Demo1 {
  private dom: HTMLCanvasElement
  private engine: Engine
  private scene: Scene
  private camera: ArcRotateCamera

  constructor(dom: HTMLCanvasElement) {
    this.dom = dom
    this.engine = new Engine(this.dom, true)  // 设置引擎
    this.scene = new Scene(this.engine)   // 创建场景
    this.camera = new ArcRotateCamera("Camera", Math.PI, Math.PI / 8, 150, Vector3.Zero(), this.scene); // 创建相机
    this.camera.setTarget(Vector3.Zero())  // 设置相机起点

    this.camera.attachControl(this.dom, false)  // 把相机放到画布

    const light = new HemisphericLight('light', new Vector3(0, 1, 0), this.scene);  // 放置光源

    const box1: Mesh = Mesh.CreateBox('box1', 10, this.scene)
    const box2: Mesh = Mesh.CreateBox('box1', 10, this.scene)
    const box3: Mesh = Mesh.CreateBox('box1', 10, this.scene)
    const box4: Mesh = Mesh.CreateBox('box1', 10, this.scene)

    box1.position.set(0, 0, 0)
    box2.position.set(0, 15, 0)
    box3.position.set(0, 30, 0)
    box4.position.set(0, 45, 0)

    box2.rotation.y = Math.PI / 6;
    box3.rotation.y = Math.PI / 120;
    box4.rotation.y = Math.PI / 24;

    // const ground = Mesh.CreateGround('ground', 6, 6, 2, this.scene)  // 创建地板 名称 宽度、深度、场景

    window.addEventListener('resize', () => {
      this.engine.resize();
    })
  }

  render() {
    // 引擎渲染场景
    this.engine.runRenderLoop(() => {
      this.scene.render()
    })
  }




}


